
@extends('Home.common.header')

<!-- 1.添加meta csrf_token -->
<meta name="csrf-token" content="{{ csrf_token() }}"> 

<!-- 发光搜索 -->
<link href="{{ asset('css/style.css') }}" rel="stylesheet" media="screen" type="text/css" />

<!-- 留言必留 -->
<link href="{{ asset('/bootstrap/css/bootstrap.css') }}" rel="stylesheet" type="text/css" media="all"/>
<link href="css/msg.css" rel="stylesheet" type="text/css" />


<script src=" {{ asset('/js/jquery-1.8.3.min.js') }} "></script>
<script type="text/javascript" >
	
	<!-- 2.设置全局ajax选项 -->
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});
	var _token = $('meta[name="csrf-token"]').attr('content');
	
	// 加边框
	function addBorder( id )
	{
		// 图片对象
		var img = document.getElementById('pic_'+id);
		// 加边框
		img.style.border = '1px solid #FF4040';
	}
	
	// 边框变化
	function down(id)
	{
		var img = document.getElementById("pic_"+id);
		img.style.border = '1px solid #ffffff';
	}
	
	
	// 增加数量
	function addNum( com_id )
	{
		// 获取输入框内 的数量
		var saleNum = parseInt( $("input[com_id="+com_id+"]").val() );
		// 加1
		saleNum++;
		// 获取sku的库存
		var stock = parseInt( $("input[com_id="+com_id+"]").attr('stock') );
		if( saleNum > stock )
		{
			alert('土豪！ 只能买这么多了');
			return false;
		}
		// 1.设置 购买数量
		$("input[com_id="+com_id+"]").val( saleNum );
	}
	
	// 减少数量 
	function delNum( com_id )
	{
		// 获取输入框里的数量
		var saleNum = parseInt( $("input[com_id="+com_id+"]").val() );
		// 减1
		saleNum--;
		if( saleNum<1 )
		{
			alert('客官 不能再减了');
			return false;
		}
		// 1.设置 购买数量
		$("input[com_id="+com_id+"]").val( saleNum );
	}
	
	// 商品列表页 购物车 只能 操作 添加 数量为（1 至 最大库存）
	// 添加到购物车 商品ID
	function addToCart( com_id ){
		
		// 获取输入框里的数量
		var saleNum = parseInt( $("input[com_id="+com_id+"]").val() );
		
		// 添加购物车 	
		$.ajax({
			type:"post",
			url:"{{ url('/insertCart') }}",
			// 商品ID 和 购买数量 
			data:{id:com_id,num:saleNum,_token:_token},
			async:false,    					
			dataType:"html",
			success:function(back){
				if( back!='' ){
					$(function(){
						// 设置提示内容
						$( "#show_"+com_id ).html(back);
						$( "#show_"+com_id ).slideDown(1000,function(){
							location.reload();
						});
					})
				}
			}
		});
			
	}
	
	$(function(){
		
		// 创建 留言
		$("#msg").click(function(){

			// 获取 留言
			var message = $("#content").val();
			if( message=='  写下您对我们想说的话，帮助我们更好的为您提供服务')
			{
				return false;
			}
			// 创建 留言
			$.ajax({
				type:"post",
				url:"{{ url('/doMsg') }}",
				data:{message:message,_token:_token},
				async:true,    					
				dataType:"json",
				success:function(back)
				{
					var str = back['show_info'];
					// 赋值
					$("#thanks").html( str );
					// 展开
					$("#thanks").slideDown();
					// 收起
					$("#thanks").delay(1200).slideUp();
					// 恢复 原值
					$("#content").val("  写下您对我们想说的话，帮助我们更好的为您提供服务");
				}
			});
		});
	})

</script>

<br/>


<!--  搜索框  -->
<form action="{{ url('/getComs') }}" method='post' >
	{{ csrf_field() }}
	<div class="wrap" style="width:80%;position:absolute;z-index:30;margin-left:10%;margin-top:50px;">
		
		<input type="text" placeholder="输入要搜索的商品名称" name='keyword' id="input" value="{{ $request or '' }}" />
		
		<input type="submit" class="btn btn-success" value="搜索" id="button" >
		
		<!-- <a href="{{ '/' }}" class="btn btn-success" style="position:absolute;top:5px;margin-left:900px;height:35px;cursor:pointer;">清空条件</a> -->
		
	</div>
</form>
	
	
	

	
<!-- 轮播 -->
<div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
     
		 <!-- 小圆点 -->
		 <ol class="carousel-indicators">
			@forelse( $shufflings as $key => $shuffling_info )
				@if( $key == 0 )
					<li class="active" data-slide-to="{{ $key }}" data-target="#carousel-example-generic"></li>
				@else
					<li data-slide-to="{{ $key }}" data-target="#carousel-example-generic"></li>
				@endif
			@empty
			@endforelse
		 </ol>
		 
		 <!-- 图片 -->
		 <div role="listbox" class="carousel-inner" >
			
				@forelse( $shufflings as $key => $shuffling_info )
					@if( $key == 0 )
						<div class="item active">
							<a href="{{ $shuffling_info->next_url }}">
								<img src="{{ $shuffling_info->pic_url }}" />
							</a>
						</div>
					@else
						<div class="item">
							<a href="{{ $shuffling_info->next_url }}">
								<img src="{{ $shuffling_info->pic_url }}" />
							</a>
						</div>
					@endif
				@empty
				@endforelse
			  
				<a data-slide="prev" role="button" href="#carousel-example-generic" class="left carousel-control">
					<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
					<span class="sr-only">Previous</span>
				</a>
			 
				<a data-slide="next" role="button" href="#carousel-example-generic" class="right carousel-control">
					<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
					<span class="sr-only">Next</span>
				</a>
		  
		</div>
</div>

<!-- 推荐 商品 专区 -->
<div style="width:100%;height:50px;background:#EAEAEA;text-align:center;font-size:21px;padding-top:10px;">
	推荐专区
</div>
<div style="width:100%;height:auto;float:left;background:#EAEAEA;">
@forelse ($coms as $com_info)
	<!-- 单个商品列表模板  #787878 -->
	<div style="border:2px solid #20B2AA;width:320px;height:430px;margin-left:77px;background:#EAEAEA;border-radius:5px;float:left;margin-bottom:50px;margin-top:20px;">
		
		<!-- 商品名 -->
		<div style="width:40%;font-size:21px;text-align:left;margin-top:10px;margin-left:40px;float:left;">
			{{ $com_info->name }}
		</div>
		
		<!-- 提示信息 -->
		<div style="width:120px;height:30px;margin-top:15px;margin-left:20px;text-align:right;margin-bottom:10px;float:left;">
			<b  id="show_{{ $com_info->id }}" style="display:none;font-size:16px;color:#FF3030;" ></b>
		</div>
		
		<!-- 图片 -->
		<div style="width:75%;margin:0 auto;height:200px;">
			<a href="{{ url('/comDetail') }}/{{ $com_info->id }}" >
				<img style="width:100%;border-radius:5px;" src="{{ asset('/images/coms') }}/{{ $com_info->pic_url }}" onmouseover="addBorder( {{ $com_info->id }} )" onmouseout="down({{ $com_info->id }});" id="pic_{{ $com_info->id }}" />
			</a>
		</div>
		
		<!-- 价格 -->
		<div style="width:80%;height:30px;margin-left:40px;font-size:21px;margin-top:45px;">
			{{ $com_info->price }}起
		</div>
		
		<!-- 描述 -->
		<div style="width:80%;height:30px;margin-top:10px;margin-left:40px;;margin-bottom:10px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;">
			{{ $com_info->description }}
		</div>
		
		<!-- 加减操作 -->
		<div style="width:100%;height:40px;border:1px solod red;">
			<!-- + -->
			<button onclick="addNum({{ $com_info->id}});" class="glyphicon glyphicon-plus" aria-hidden="true" style="float:left;margin-left:40px;margin-top:10px;background:rgba(0,0,0,0);border:0px solid red;" ></button>
			<!-- 输入框 -->
			<input com_id="{{ $com_info->id}}" stock=" {{ $com_info->stock}} " type="text" class="form-control" value='1' style="float:left;width:50px;height:30px;margin-left:5px;margin-top:2px;text-align:center;" />
			<!-- - -->
			<button onclick="delNum({{ $com_info->id}});"  class="glyphicon glyphicon-minus" aria-hidden="true" style="float:left;margin-left:5px;background:rgba(0,0,0,0);border:0px solid red;margin-top:10px;"></button>
			<!-- 库存 -->
			<div style="float:left;margin-top:7px;margin-left:25px;color:#FF4500;font-size:16px;" >
				库存 : {{ $com_info->stock }}
			</div>
		</div>
		
		<!-- 加入购物车 -->
		<div style="width:100%;height:60px;margin-top:10px;">
			<button class="btn btn-danger" style="float:left;width:250px;margin-left:35px;" onclick="addToCart( {{ $com_info->id }} );">
				加入购物车
			</button>
		</div>

		
	</div>
	
	<script type="text/javascript" >	
	
			$(function(){
				
				// 数量 输入框 失去焦点 判断
				$("input[com_id="+{{ $com_info->id }}+"]").blur(function(){
					// 获取sku的库存
					var stock = parseInt( $(this).attr('stock') );
					// 购买量
					var saleNum = $(this).val();
					// 不是数字
					if( isNaN(saleNum) )
					{
						saleNum=1;
					}
					// 浮点数 转整
					var saleNum = parseInt( saleNum );
					if( saleNum<1 )
					{
						saleNum = 1;
					}
					// 失去焦点 做判断
					if( saleNum > stock ){
						saleNum = stock;
						$(this).val(saleNum);
						//alert('土豪！最多只能选择'+stock+'件商品');
						return false;
					}
					// 1.设置 购买数量
					// 如果是字符串 也进行了转换
					$(this).val(saleNum);
				});
				
			})
	</script>	
@empty
@endforelse

</div>

<div style="width:100%;border:1px solid #EAEAEA;float:left;">
</div>

<!--- 联系我们 --->
<div  id="contact" class="contact">
	<div class="clearfix"></div>
	<div class="contact-us">
		<div class="container">
			
			<div class="us-contact">
			  <h3>联<span>系我</span>们</h3>
			  <p> Phone: 18801030115<br>
				Email: 2213943268@qq.com<br>
			</div>
			
			  <div class="grid-contact-bootom" style="width:60%;margin:0 auto;">
					<div class="col-md-12 contact-bottom">
						<textarea cols="10" rows="5" name="content" id="content" onFocus="this.value='';" onBlur="if (this.value == '') {this.value = '  写下您对我们想说的话，帮助我们更好的为您提供服务';}">  写下您对我们想说的话，帮助我们更好的为您提供服务</textarea>
					</div>
					<div class="clearfix"></div>
			  </div>
			  <div style="border:1px solid red;height:50px;width:30%;margin:0 auto;border:2px solid #05a1ea;border-radius:50px;padding: 0.6em 2em;margin-bottom:10px;display:none;color:green;font-size:16px;" id="thanks">
			  </div>
			  <button id="msg" style="margin-left:41%;" >匿名留言</button>
			 
		</div>
	</div>
</div>

<!-- 友情链接  
<div style="margin:0 auto;font-size:18px;width:100%;text-align:center;margin-top:20px;margin-bottom:20px;">
友情链接：
@forelse( $links as $key => $link_info )
	<a href="{{$link_info->url}}">{{ $link_info->name }}</a>
@empty
@endforelse
</div>-->


<!--footer--> 
<div class="footer" style="height:20px;">
	<div class="container">
		<a href="#"><h4 class="footer-class"></h4></a>		
		<p style="float:right;margin-top:-10px;">Copyright &#169; 2019 Car Club 版权所有</p>
		<div class="clearfix"> </div>
	</div>
	<a href="#" id="toTop" style="display:block;"> 
		<span id="toTopHover" style="opacity: 1;"></span>
	</a>
</div> 



@extends('Home.common.footer')